<script setup>
	import phoneVerifyLogin from "./components/phoneVerifyLogin.vue"
	import useAgree from "@/hooks/useAgree.js"
	const {
		isAgree,
		check,
		look
	} = useAgree()
</script>

<template>
	<view class="u-p-40 container">
		<up-gap height="80"></up-gap>
		<view class="u-m-t-60 y-f-s-40">您好，</view>
		<view class="y-f-s-40">欢迎使用哈哈跑题</view>

		<!-- 手机号验证码登录 -->
		<up-gap height="30"></up-gap>
		<phoneVerifyLogin :isAgree="isAgree"></phoneVerifyLogin>

		<view class="y-f-s-26 u-m-t-80 $u-tips-color u-flex u-flex-items-start tip-box" @click.stop="check">
			<view class="u-m-t-6 u-flex u-flex-center u-flex-items-center icon-box" :class="[{'cur':isAgree}]">
				<up-icon name="checkbox-mark" color="#f8f8f8" size="12"></up-icon>
			</view>
			<view class="u-m-l-10" style="flex: 1;">
				<text>已阅读并同意</text>
				<text class="agree" @click.stop="look('user')">《用户协议》</text>
				<text>和</text>
				<text class="agree" @click.stop="look('privacy')">《隐私政策》</text>
				<text>并授权使用您的账号信息(如昵称、头像等)以便统一管理</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: url("https://img1.baidu.com/it/u=1172319054,1238102685&fm=253&fmt=auto&app=138&f=JPEG?w=266&h=400") no-repeat;
		background-size: cover;
		
		color: #fff;
	}

	.tip-box {
		position: absolute;
		bottom: 60rpx;
		left: 40rpx;
		right: 40rpx;

		.icon-box {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 1px solid #999;
		}

		.cur {
			border-color: #1296db;
			background: #1296db;
		}

		.agree {
			color: $uni-color-warning;
		}
	}
</style>